<!--
使用步骤
1、组件引用
import SunDetailPage from '@/sun-components/SunDetailPage'
components: { SunDetailPage }
2、页面使用固定用法
  2.1、点击事件
    <el-table-column label="课程名称">
      <template slot-scope="{row}">
        <span @click="showDetails(row)">{{ row.name }}</span>
      </template>
    </el-table-column>
  2.2、组价挂载
    <el-drawer
      :with-header="false"
      :destroy-on-close="true"
      :wrapper-closable="false"
      :visible.sync="show_details"
      direction="rtl"
      @click="drawerClose('show_details')"
    >
      <sunDetailPage :data-key="dataKey" :data-detail="dataDetail" :details-title="detailsTitle" />
    </el-drawer>

3、组件变量示例：
data() {
  dataKey：变量诠释以 { 'name': '名称', show: 'name', lg: 6 } 为例
  'name': '名称' ————> 名称为字段说明
  'show': 'name' —————> name 为 dataDetail 中需要显示的字段key 以上面字段信息说明的 key 必须相同
  'lg': 6 ————> 显示 24 / 6 列 ( 等分列为 24 的整数倍 )
  'is_replace': false —————> true 字段取代 (复杂格式的数据没法做到统一，此字段为true 则显示字段取 原字段_value，注：当type类型不为text时该失效)
  'type': 'text' type类型 普通文本类型 array 数组类型 image 图片类型 video 视频类型 richText 富文本类型

  dataKey: [/** lg=8 三列：8为三分之一 16 为二分之一 24为1；lg=8 四列：6四分之一，12二分之一，18三分之一，24为一 */
    { 'id': 'ID', show: 'id', lg: 6 },
    { 'name': '名称', show: 'name', lg: 6 },
    { 'created_at': '创建时间', show: 'created_at', lg: 12 },
    { 'updated_at': '更新时间', show: 'updated_at', lg: 12 }
  ],
  show_details: false, // 显示隐藏控制
  dataDetail: {}, // 列数据
  detailsTitle: '我是默认标题',
}
4、函数调用及数据设置
  4.1、开启
    async showDetails(row) {
      const _that = this
      _that.show_details = true
      _that.detailsTitle = row.name
      _that.dataDetail = row
    },
  4.2、关闭
    async drawerClose(type) {
      this[type] = false
    },

-->
<template>
  <div :style="{'margin-top': isHeader ? '51px' : 0 }">
    <sunDrawerBack v-if="isBack" :parent="this.$parent.$parent" :show="visible" />
    <el-page-header v-if="isHeader" class="sun-el-page-header" :content="detailsTitle" @back="goBack" />
    <div v-if="title !== ''" style="font-size: 18px;color: #303133;font-weight: bold;line-height: 24px;padding: 0 0 0 14px">{{ title }}</div>
    <div style="padding: 14px;background: #FFFFFF;">
      <el-row :gutter="40" class="sun-el-row">
        <el-col
          v-for="(item, index) in dataKey"
          :key="index"
          :lg="item.lg"
          class="sun-el-col"
        >
          <span v-if="item.type !== 'image' || item.type === 'richText'" class="content-title" style="background: #fafafa">{{ item[item.show] }}</span>
          <span v-if="item.type === 'text'" class="content-id">{{ item.is_replace ? dataDetail[item.show + '_value'] : dataDetail[item.show] || '暂无' }}</span>
          <span v-if="item.type === 'array'">
            <span v-for="el in dataDetail[item.show + '_array']" :key="el" class="content-array">
              <el-tag size="medium" style="background: #FFFFFF;border: none;font-size: 14px;color: #606266;">{{ el }}</el-tag>
            </span>
          </span>
          <span v-if="item.type === 'image'" class="content-image">
            <spen v-for="fit in 10" :key="fit">
              <div style="width: 200px; height: 200px;display: inline-block;">
                <el-image
                  class="img_picture"
                  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                />
              </div>
            </spen>
          </span>
          <span v-if="item.type === 'video'">
            {{ '视频类型' }}
          </span>
          <span v-if="item.type === 'richText'" class="content-id" style="width: calc(100% - 100px);" v-html="dataDetail[item.show]" />
        </el-col>
      </el-row>
    </div>
    <div v-if="isButton" style="padding: 14px">
      <span class="dialog-footer">
        <el-button v-if="isDel" type="danger" size="small" @click="removeData">删 除</el-button>
        <el-button type="primary" size="small" @click="goBack">关 闭</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import SunDrawerBack from '@/sun-components/SunDrawerBack'
export default {
  name: 'ArticleDetail',
  components: { SunDrawerBack },
  props: {
    dataDetail: { /** 对象详情 */
      type: Object,
      default: function() {
        return {}
      }
    },
    dataKey: { /** 需要显示的数组字段及配置 */
      type: Array,
      default: function() {
        return []
      }
    },
    detailsTitle: {
      type: String,
      default: '详情'
    },
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: String,
      default: 'show_details'
    },
    isHeader: {
      type: Boolean,
      default: true
    },
    isButton: {
      type: Boolean,
      default: true
    },
    isBack: {
      type: Boolean,
      default: true
    },
    isDel: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
  },
  methods: {
    async goBack() {
      this.$parent.$parent.drawerClose(this.visible)
    },
    async removeData() {
      this.$parent.$parent.removeData(this.dataDetail.id)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
  .sun-el-row {
    margin: auto !important;border-top: 1px solid #f0f0f0;border-left: 1px solid #f0f0f0;
  }
  .sun-el-col {
    padding: 0 !important;border-bottom: 1px solid #f0f0f0;border-right: 1px solid #f0f0f0;
  }
  .content-title {
    display: inline-block;border-right: 1px solid #f0f0f0;
    line-height: 20px;
    padding: 15px 10px;
    width: 100px;text-align: center;font-size: 14px;color: #909399;font-weight: bold;
  }
  .content-id {
    display: inline-block;padding: 0 10px;font-size: 14px;color: #606266;
  }
  .content-array {
    display: inline-block;
  }
  .content-image{
    display: block;padding: 10px
  }
  .img_picture { margin: 0; padding: 0; width: 100%; height: 100%; object-fit: cover; }
</style>

